<template>
  <div id="charts3" ref="charts3" style="height: 400px;"></div>
</template>
<script>
  export default {
    mounted() {
      this.drawchart()
    },
    methods: {
      drawchart() {
        var option = {
          textStyle: {
            color: '#fff',
          },
          title: {
            text: '论文发表走势'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: ''
              }
            }
          },
          legend: {
            data: ['中文论文', '英文论文', '总论文数']
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ['2011', '2012', '2013', '2014', '2015', '2016', '2017']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '中文论文',
              type: 'line',
              stack: '总量',
              areaStyle: {
                normal: {
                  color: '#b9f2a1'
                }
              },
              data: [9, 4, 7, 5, 8, 9, 10]
            },
            {
              name: '英文论文',
              type: 'line',
              stack: '总量',
              areaStyle: {
                normal: {
                  color: '#6eba8c'
                }
              },
              data: [8, 5, 3, 7, 8, 4, 2]
            },

            {
              name: '总论文数',
              type: 'line',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
              areaStyle: {
                normal: {
                  color: '#005562'
                }
              },
              data: [17, 9, 10, 12, 16, 13, 12]
            }
          ]
        };

        var mycharts = this.$echarts.init(this.$refs.charts3)
        mycharts.setOption(option)
      }
    }
  }
</script>
<style></style>
